<template>
  <div>
    <v-tableTitle :btnConfig="btnConfig" :tableSelectData="tableSelectData" title="api基础信息" @del="del" @newCreate="newCreate" @requestFieldConfig="requestFieldConfig"></v-tableTitle>
    <GTable ref="table" :hasCheck="true" :hasEdit="true" :api="apiMap.getListApi" :columnSource="baseColumns" :cbFun="cbFun" @selection-change="data => tableSelectData = data"
      @setdialog="setdialog" />

    <el-dialog :title="dialogModule.title" :visible.sync="dialogModule.flag" center v-dialogDrag width="720px" @closed="closed">
      <div v-tit="'api基础信息'">
        <GForm ref="detail" :config="formConfig" :rules="formRules" labelWidth="120px" v-model="form" @handleInput="handleInput"></GForm>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="dialogModule.flag = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableTitle from 'commons/TableTitle'

export default {
  name: 'apiBase',
  data() {
    return {
      tableSelectData: [],
      dialogModule: {
        loading: false,
        flag: false,
        title: '',
        data: null,
        type: ''
      },
      form: {
        applicationId: null,
        structureCode: '',
        apiRequestRootType: '',
        apiRequestTemplate: '',
        apiResponseTemplate: '',
        remark: '',
        logkey: ''
      },
      options: {
        app: [],
        company: [],
        type: [],
        stdrequest:[],
        dynamicsClass:[],
        dynamsubicsClass:[],
        sourceList:[]
      }
    }
  },
  computed: {
    btnConfig() {
      return [
        {
          label: this.$t('common.create'),
          invalid: 'newCreate'
        },
        {
          label: this.$t('common.delete'),
          disabled: true,
          invalid: 'del'
        },
        {
          label: '接口自定义字段配置',
          disabled: true,
          invalid: 'requestFieldConfig'
        }
      ]
    },
    baseColumns() {
      return [
        // {
        //   label: '公司',
        //   prop: 'companyId',
        //   input: 'select',
        //   options: this.options.company
        // },
        {
          label: 'API名称',
          prop: 'apiName',
          input: 'input'
        },
        {
          label: 'API域',
          prop: 'apiDomail',
          input: 'input'
        },
        {
          label: '源应用APP',
          prop: 'applicationId',
          input: 'select',
          options: this.options.app
        },
        {
          label: '日志关键字段',
          prop: 'logkey',
          input: 'input'
        },
        {
          label: '备注',
          prop: 'remark'
        },
        {
          label: 'wms主表',
          prop: 'mainclass',
          input: 'select',
          options: this.options.dynamicsClass
        },
        {
          label: 'wms明细表',
          prop: 'subclass',
          input: 'select',
          options: this.options.dynamsubicsClass
        },
        {
          label: '源数据',
          prop: 'source',
          input: 'select',
          options: this.options.sourceList
        },
        {
          label: this.$t('app.addName'),
          prop: 'insUser'
        },
        {
          label: this.$t('app.addDate'),
          prop: 'insTime'
        },
        {
          label: this.$t('app.updateName'),
          prop: 'updUser'
        },
        {
          label: this.$t('app.updateDate'),
          prop: 'updTime'
        }
      ]
    },
    formConfig() {
      return [
        {
          label: 'API名称',
          prop: 'apiName',
          type: 'input'
        },
        {
          label: 'API域',
          prop: 'apiDomail',
          type: 'input'
        },
        {
          label: '源应用APP',
          prop: 'applicationId',
          type: 'select',
          options: this.options.app
        },
        {
          label: '日志关键字段',
          prop: 'logkey',
          type: 'input'
        },
        {
          label: 'wms报文模板',
          prop: 'stdrequest',
          type: 'select',
          options: this.options.stdrequest
        },
        {
          label: 'wms主表',
          prop: 'mainclass',
          type: 'select',
          options: this.options.dynamicsClass
        },
        {
          label: 'wms明细表',
          prop: 'subclass',
          type: 'select',
          options: this.options.dynamsubicsClass
        },
        {
          label: '源数据',
          prop: 'source',
          type: 'select',
          options: this.options.sourceList
        },
        {
          label: '请求报文模板',
          prop: 'apiRequestTemplate',
          type: 'textarea',
          desc: '外部应用报文模板，或内部开发接口报文'
        },
        // {
        //   label: '表配置内部应用下API可选维护',
        //   prop: 'tableConfig',
        //   type: 'textarea',
        //   desc: '配置表信息{"maintable":"主表如orders","subtable":"从表如orderdetail可不填","whseid":"数据源"}'
        // },
        {
          label: '备注',
          prop: 'remark',
          type: 'textarea'
        }
      ]
    },
    formRules() {
      return {
        applicationId: [
          {
            required: true,
            message: '请选择源应用APP',
            trigger: 'change'
          }
        ],
        apiRequestRootType: [
          {
            required: true,
            message: '请选择报文根节点数据类型',
            trigger: 'change'
          }
        ]
      }
    },
    apiMap() {
      return {
        getListApi: '/v1/edi/apibaseinfo/selectPlApibaseinfoList',
        getInfoApi: '/v1/edi/apibaseinfo/selectPlApibaseinfoById',
        deleteApi: '/v1/edi/apibaseinfo/deletePlApibaseinfoByIds',
        editApi: '/v1/edi/apibaseinfo/editPlApibaseinfoById',
        addApi: '/v1/edi/apibaseinfo/addPlApibaseinfo'
      }
    }
  },
  methods: {
    requestFieldConfig(data){
      console.log(data);
      if(data.length != 1){
        return this.$message.error("请选择一条数据进行操作")
      }
      if(data[0].mainclass == ''){
        return this.$message.error("请选择wms主表");
      }
      this.$router.push({ path: '/apiBase/tableConfig', query: { id: data[0].id } })
    },
    handleConfirm() {
      this.$refs.detail.validate().then(valid => {
        const params = this._.cloneDeep(this.form)
        const appObj = this.options.app.find(
          opt => opt.id == params.applicationId
        )
        params.applicationNo = appObj.applicationNo
        params.applicationName = appObj.applicationName
        let promise
        if (this.dialogModule.type == 'edit') {
          promise = this.$post(this.apiMap.editApi, params)
        } else {
          promise = this.$post(this.apiMap.addApi, params)
        }
        promise.then(res => {
          this.$message.success(res.returnMgr)
          this.getTableData()
          this.$refs.detail?.resetFields()
          this.dialogModule.flag = false
        })
      })
    },
    getInfoById(id) {
      this.$post(this.apiMap.getInfoApi, {
        id
      }).then(res => {
        this.form = res.data.item
        this.dialogModule.flag = true
      })
    },
    setdialog(data) {
      this.dialogModule.title = `编辑[${data.apiName}]api基础信息`
      this.dialogModule.type = 'edit'
      this.dialogModule.data = data
      this.getInfoById(data.id)
    },
    newCreate() {
      this.dialogModule.title = '新增api基础信息'
      this.dialogModule.type = 'add'
      this.dialogModule.data = null
      this.dialogModule.flag = true
    },
    //删除
    async del(data) {
      this.$post(this.apiMap.deleteApi, data).then(res => {
        this.$message.success(res.returnMgr)
        this.getTableData()
      })
    },
    getOptions() {
      this.$post('/v1/plApplication/selectPlApplicationList', {
        pageNum: 1,
        pageSize: 999,
        applicationStatus: '50301'
      }).then(res => {
        const data = res.data.page.records
        this.options.app = data.map(i => {
          i.label = i.applicationName
          i.value = i.id
          return i
        })
      })
      this.$post('/v1/edi/plCompany/selectPlCompany').then(res => {
        this.options.company = res.data.item.map(i => {
          i.label = i.companyName
          i.value = i.id
          return i
        })
      })
      this.$post('/v1/edi/apibaseinfo/selectSTDRequest').then(res => {
        this.options.stdrequest = res.data.item.stdRequest;
        this.options.dynamicsClass = res.data.item.dynamicsClass;
        this.options.dynamsubicsClass = res.data.item.dynamsubicsClass;
      })
      this.$post('/v1/PlExpressSourceData/selectExpressSourceDataList',{
        pageNum: 1,
        pageSize: 999
      }).then(res => {
        const dataList = res.data.page.records;
        this.options.sourceList = dataList.map(i => {
          i.label = i.name;
          i.value = i.code;
          return i;
        });
      });
    },
    handleInput(prop, val, obj) {
      if('stdrequest'==prop){
        this.form.apiRequestTemplate=val;
      }
    
    },
    closed() {
      this.$refs.detail?.resetFields()
    },
    cbFun(res) {
      return { list: res.data.page.records, total: res.data.page.total }
    },
    async getTableData() {
      this.$refs.table.getTableData()
    }
  },
  mounted() {
    this.getOptions()
  },
  components: {
    'v-tableTitle': tableTitle
  }
}
</script>

<style scoped>
</style>
